<template>
  <div v-if="'technology' != theme.themeName" class="vip-color-picker" style="margin-left: var(--el-margin)">
    <el-color-picker
      v-model="color"
      popper-class="vip-color-picker-popper"
      :predefine="predefineColors"
      @active-change="handleChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { color as _color } from '/@lib/config/'
import { useSettingsStore } from '/@/store/modules/settings'
import { MittBusUtil } from '/@lib/utils/mittBus.ts'

defineOptions({
  name: 'VipColorPicker'
})

const predefineColors = ref<any>([
  _color,
  '#1e90ff',
  '#4e6ef2',
  '#0052d9',
  '#3fb884',
  '#16baa9',
  '#07c160',
  '#009688',
  '#6954f0',
  '#7b40f2',
  '#f01414'
])
const settingsStore = useSettingsStore()
const { changeColor, getColor } = settingsStore
const { color, theme } = storeToRefs(settingsStore)

const handleChange = (value: any) => {
  color.value = value
  changeColor()
}

onBeforeMount(() => {
  // 还原默认
  MittBusUtil.on('shop-vite-reset-color', () => {
    handleChange(_color)
  })
  MittBusUtil.on('shop-vite-change-color', () => {
    handleChange(color)
  })
  handleChange(getColor)
})
</script>

<style lang="scss">
.vip-color-picker-popper {
  box-sizing: content-box !important;
  padding: calc(var(--el-padding) / 2);

  .el-color-dropdown__link-btn {
    display: none;
  }

  .el-color-dropdown__btns {
    margin-top: 0;
  }
}
</style>
